import React, { useRef, useState, useMemo } from 'react';
import {
  Button,
  Form,
  Input,
  Select,
  Collapse,
  Space,
  Message,
  Popconfirm,
  Modal,
  Notification,
  List,
  Transfer,
  Tag
} from '@arco-design/web-react';
import { keys, values } from 'lodash-es';
import {
  toJsonNode,
  toFuncArgNode,
  toFuncNode,
  variableTypes,
  useVariableStore,
  VariableItem,
  useStageStore,
  useNodeStore,
  useFileStore,
  NodeInputTypeFcun,
  ObjectItem,
  useObjectStore,
} from 'codeck';
import { useMemoizedFn } from 'ahooks';
import Konva from 'konva';
import { IconBranch, IconTool, IconApps, IconMindMapping, IconShareAlt } from '@arco-design/web-react/icon';
export const variableScopeTypes = [
  "let",
  "var",
  "const",
];
import { usePersist } from '../../components/ManagerPanel/persist';

export interface FunctionItem {
  name: string;
  type: string;
  arg: string;
}
const FormItem = Form.Item;

function toNode(values: { name: string, defaultValue: string }) {
  if (values.name == '[input]' || values.name == '[output]')
    useNodeStore.getState().regNode(toFuncArgNode(values.name, values.defaultValue));
  else
    useNodeStore.getState().regNode(toJsonNode(values.name, values.defaultValue));
}

export const ManagerPanel: React.FC = React.memo(() => {
  const { createNode, createToRemoveNode } = useNodeStore();
  const { getRelativePointerPosition, calcAbsolutePositionToRelative } = useStageStore();
  const nodeCreatedPosRef = useRef<Konva.Vector2d | null>(null);

  const handleCreateNode = useMemoizedFn(
    (nodeName: string, e: React.DragEvent<HTMLDivElement> | null, data?: Record<string, any>, remove?: boolean) => {
      if (e) {
        nodeCreatedPosRef.current = calcAbsolutePositionToRelative({ x: e.clientX, y: e.clientY });
      } else {
        nodeCreatedPosRef.current = getRelativePointerPosition();
        nodeCreatedPosRef.current.x -= 250;
        nodeCreatedPosRef.current.y -= 150;
      }
      if (!nodeName) {
        Message.error({
          content: 'Node Name undefined',
          style: {
            marginTop: 45
          }
        })
        return;
      }

      if (!nodeCreatedPosRef.current) {
        Message.error({
          content: 'Cannot get pointer position',
          style: {
            marginTop: 45
          }
        })
        return;
      }

      if (remove)
        createToRemoveNode(nodeName, nodeCreatedPosRef.current, data);
      else
        createNode(nodeName, nodeCreatedPosRef.current, data);
    }
  );
  // const { nodeDefinition } = useNodeStore();
  // const list = useMemo(
  //   () => values(nodeDefinition).filter((definiton) => !definiton.hidden),
  //   [nodeDefinition]
  // );
  // const Tsist = list.map((obj) => ({
  //   key: `${obj.name}`,
  //   value: `${obj.label}`,
  // }))
  return (
    <div className="p-2 h-full flex flex-col">
      <div className="flex-1 overflow-auto" style={{ height: '-webkit-fill-available' }}>
        <div style={{ width: '100%' }}>
          <div className="text-right">
            {/* <Button
              long={true}
              onClick={() => {
                Modal.confirm({
                  title: '节点包设置',
                  footer: null,
                  icon: null,
                  onCancel: () => {
                    console.log('666')
                  },
                  content: <CustomNodes list={Tsist} />,
                })

              }}
            >
              创建变量
            </Button> */}
            <Collapse bordered={true} lazyload={true} accordion={false}>
              <Collapse.Item key='variables' expandIcon={<IconBranch />} header={'变量'} name='variables' >
                <Variable handleCreateNode={handleCreateNode} />
              </Collapse.Item>
              <Collapse.Item key='object' expandIcon={<IconMindMapping />} header={'对象'} name='object' >
                <ObjectJSON handleCreateNode={handleCreateNode} />
              </Collapse.Item>
              <Collapse.Item key='functions' expandIcon={<IconTool />} header={'全局函数'} name='functions' >
                <FunctionNode handleCreateNode={handleCreateNode} />
              </Collapse.Item>
              <Collapse.Item key='Screen' expandIcon={<IconApps />} header={'节点画布'} name='Screen' >
                <Screen handleCreateNode={handleCreateNode} />
              </Collapse.Item>
              <Collapse.Item key='nodeControl' expandIcon={<IconShareAlt />} header={'节点控件'} name='nodeControl' >
                <NodeControl />
              </Collapse.Item>
            </Collapse>
          </div>
        </div>
      </div>
    </div>
  );
});
ManagerPanel.displayName = 'ManagerPanel';


const NodeControl: React.FC = React.memo(() => {
  const { nodeControlMap, deleteNode } = useObjectStore();
  const nodeControlList = values(nodeControlMap);
  const {
    openURLNode: handleURLNode,
  } = usePersist();
  return (
    <>
      <div style={{ width: '100%', marginBottom: '10px' }}>
        <Button
          long={true}
          onClick={() => {
            Modal.confirm({
              title: '导入外部控件',
              footer: null,
              icon: null,
              maskClosable: false,
              content: <NodaForm
                submitLabel="导入"
                onSubmit={(values: { url: string }) => {
                  handleURLNode(values.url);
                  Modal.destroyAll(); 
                }}
              />,
            })

          }}
        >
          导入控件（{nodeControlList.length}）
        </Button>
      </div>
      <Collapse bordered={true} lazyload={true} accordion={true} >
        {nodeControlList.map((item) => (
          <Collapse.Item key={new Function(item + "\n return nodaConfig;")().type} header={new Function(item + "\n return nodaConfig;")().title} name={new Function(item + "\n return nodaConfig;")().type} extra={
            new Function(item + "\n return nodaConfig;")().nickname
          }>

            <Tag size='medium' style={{ marginBottom: 10 }}>
              节点分类：{new Function(item + "\n return nodaConfig;")().category}
            </Tag>
            <Tag size='medium' style={{ marginBottom: 10 }}>介绍：{new Function(item + "\n return nodaConfig;")().doc}</Tag>
            <Space size='large' style={{ justifyContent: 'flex-end' }}>

              <Button status="default" onClick={() => window.open(new Function(item + "\n return nodaConfig;")().url)}>
                使用帮助
              </Button>

              <Popconfirm
                focusLock
                title='请核实画布中，是否已解除相关节点？'
                onOk={
                  () => deleteNode(new Function(item + "\n return nodaConfig;")().type)
                }
              >
                <Button status="danger" >
                  删除
                </Button>
              </Popconfirm>
            </Space>
          </Collapse.Item>
        ))}
      </Collapse>
    </>
  );
});
NodeControl.displayName = 'NodeControl';

const Variable: React.FC<{ handleCreateNode: (nodeName: string, e: React.DragEvent<HTMLDivElement> | null, data?: Record<string, any>, remove?: boolean) => void }> = React.memo((props) => {
  const { variableMap, createVariable, deleteVariable, updateVariable } = useVariableStore();
  const { handleCreateNode } = props;
  const variableList = values(variableMap);
  return (
    <>
      <div style={{ width: '100%', marginBottom: '10px' }}>
        <Button
          long={true}
          onClick={() => {
            Modal.confirm({
              title: '创建变量',
              footer: null,
              icon: null,
              maskClosable: false,
              content: <VariableForm
                isCreate={false}
                initialValues={{ name: '', scope: variableScopeTypes[0], type: variableTypes[0] }}
                submitLabel="创建"
                onSubmit={(values: VariableItem) => {

                  createVariable(values.name, values.type, values.scope, values.defaultValue);
                  Modal.destroyAll();
                }}
              />,
            })

          }}
        >
          创建变量（{variableList.length}）
        </Button>
      </div>
      <Collapse bordered={true} lazyload={true} accordion={true} >
        {variableList.map((item) => (
          <Collapse.Item key={item.name} header={item.name} name={item.name} extra={
            <>
              <Space size='large' style={{ justifyContent: 'flex-end' }}>
                <Button status="success"
                  long={true}
                  draggable={true}
                  onDragEnd={(e) => handleCreateNode('varget', e, {
                    name: item.name,
                    type: item.type,
                    variable: 1,
                  })}
                  onClick={() => handleCreateNode('varget', null, {
                    name: item.name,
                    type: item.type,
                    variable: 1,
                  })}>
                  获取
                </Button>
                <Button status="warning"
                  long={true}

                  draggable={true}
                  onDragEnd={(e) => handleCreateNode('varset', e, {
                    name: item.name,
                    type: item.type,
                    variable: 1,
                  })}
                  onClick={() => handleCreateNode('varset', null, {
                    name: item.name,
                    type: item.type,
                    variable: 1,
                  })}>
                  设置
                </Button>
              </Space>
            </>
          }>

            <Space size='large' style={{ justifyContent: 'flex-end' }}>
              <Button
                onClick={() => {
                  Modal.confirm({
                    title: '更新变量',
                    footer: null,
                    icon: null,
                    maskClosable: false,
                    content: <VariableForm
                      isCreate={true}
                      initialValues={item}
                      submitLabel="更新"
                      onSubmit={(values: VariableItem) => {
                        updateVariable(values.name, values.type, values.scope, values.defaultValue);
                        Modal.destroyAll();
                      }}
                    />,
                  })

                }}
              >
                更新变量
              </Button>
              <Popconfirm
                focusLock
                title='请核实画布中，是否已解除相关节点？'
                onOk={() => {
                  deleteVariable(item.name)
                }}
              >
                <Button status="danger" >
                  删除
                </Button>
              </Popconfirm>
            </Space>
          </Collapse.Item>
        ))}
      </Collapse>
    </>
  );
});
Variable.displayName = 'Variable';


const FunctionNode: React.FC<{ handleCreateNode: (nodeName: string, e: React.DragEvent<HTMLDivElement> | null, data?: Record<string, any>, remove?: boolean) => void }> = React.memo((props) => {
  const { mapLoad, codeckPersistMap, codeckMapID, createPersist, deletePersist } = useFileStore();
  const { objectMap, createObject, deleteObject, updateObject } = useObjectStore();
  const { handleCreateNode } = props;
  const codeckPersistMapList = keys(codeckPersistMap.map).filter(item => item.includes('[Function]'));
  return (
    <>
      <div style={{ width: '100%', marginBottom: '10px' }}>
        <Button
          long={true}
          onClick={() => {
            Modal.confirm({
              title: '创建函数',
              footer: null,
              icon: null,
              maskClosable: false,
              content: <FunctionForm
                isCreate={false}
                initialValues={{ name: '', arg: '', type: 'Function' }}
                submitLabel="创建"
                onSubmit={(values: FunctionItem) => {
                  createPersist(values.name, values.type, values.arg);
                  Modal.destroyAll();
                }}
              />,
            })

          }}
        >
          创建函数（{codeckPersistMapList.length}）
        </Button>
      </div>
      <Collapse bordered={true} lazyload={true} accordion={true} >
        {codeckPersistMapList.map((item) => (
          <Collapse.Item key={item} header={item.split('[Fun')[0]} name={item} extra={
            <>
              <Space size='large' style={{ justifyContent: 'flex-end' }}>
                <Button status="success"
                  draggable={true}
                  onDragEnd={(e) => {
                    let isThis = false;
                    if (item == codeckMapID) {
                      Notification.warning({
                        style: { width: 500, marginTop: 45 },
                        title: '将调用' + item.split('[Fun')[0] + '函数',
                        content: '为了程序的安全，请注意避免死循环',
                      })
                      isThis = true;
                    }
                    handleCreateNode('raw-function()', e, {
                      funcName: item,
                      Path: item,
                      isThis: isThis,
                      labelT: item.split('[Fun')[0] + '()',
                      variable: 1,
                    })
                    let input = codeckPersistMap.map[item].modules.object['[input]'];
                    if (input.defaultValue) {
                      useNodeStore.getState().regNode(toFuncNode(input.name + item, input.defaultValue));
                      handleCreateNode(input.name + item, e)
                    }
                    let output = codeckPersistMap.map[item].modules.object['[output]'];
                    if (output.defaultValue) {
                      useNodeStore.getState().regNode(toFuncNode(output.name + item, output.defaultValue));
                      handleCreateNode(output.name + item, e)
                    }
                  }}
                  onClick={() => {
                    let isThis = false;
                    if (item == codeckMapID) {
                      Notification.warning({
                        style: { width: 500, marginTop: 45 },
                        title: '将调用' + item.split('[Fun')[0] + '函数',
                        content: '为了程序的安全，请注意避免死循环',
                      })
                      isThis = true;
                    }
                    handleCreateNode('raw-function()', null, {
                      funcName: item,
                      Path: item,
                      isThis: isThis,
                      labelT: item.split('[Fun')[0] + '()',
                      variable: 1,
                    })
                    let input = codeckPersistMap.map[item].modules.object['[input]'];
                    if (input.defaultValue) {
                      useNodeStore.getState().regNode(toFuncNode(input.name + item, input.defaultValue));
                      handleCreateNode(input.name + item, null)
                    }
                    let output = codeckPersistMap.map[item].modules.object['[output]'];
                    if (output.defaultValue) {
                      useNodeStore.getState().regNode(toFuncNode(output.name + item, output.defaultValue));
                      handleCreateNode(output.name + item, null)
                    }
                  }}>
                  调用
                </Button>
              </Space>
            </>
          }>
            <Space size='large' style={{ justifyContent: 'flex-end' }}>

              <Button status="default"
                onClick={(e) => {
                  useFileStore.getState().undoCodeckMapID = useFileStore.getState().codeckMapID;
                  useFileStore.getState().codeckMapID = item;
                  mapLoad();
                  useStageStore.getState().focus();
                }}
              >
                编辑函数
              </Button>
              <Popconfirm
                focusLock
                title='请核实画布中，是否已解除相关节点？'
                onOk={() => {
                  deletePersist(item)
                }}
              >
                <Button status="danger" >
                  删除
                </Button>
              </Popconfirm>
            </Space>
          </Collapse.Item>
        ))}
      </Collapse>
    </>
  );
});
FunctionNode.displayName = 'FunctionNode';

const ObjectJSON: React.FC<{ handleCreateNode: (nodeName: string, e: React.DragEvent<HTMLDivElement> | null, data?: Record<string, any>, remove?: boolean) => void }> = React.memo((props) => {
  const { objectMap, createObject, deleteObject, updateObject } = useObjectStore();
  const { handleCreateNode } = props;
  const objectList = values(objectMap);
  return (
    <>
      <div style={{ width: '100%', marginBottom: '10px' }}>
        <Button
          long={true}
          onClick={() => {
            Modal.confirm({
              title: '创建对象',
              footer: null,
              icon: null,
              maskClosable: false,
              content: <ObjectForm
                isCreate={false}
                initialValues={{ name: '', defaultValue: '' }}
                submitLabel="创建"
                onSubmit={(values: ObjectItem) => {
                  createObject(values.name, values.defaultValue)
                  Modal.destroyAll();
                }}
              />,
            })

          }}
        >
          创建JSON（{objectList.length}）
        </Button>
      </div>
      <Collapse bordered={true} lazyload={true} accordion={true} >
        {objectList.map((item) => (
          <Collapse.Item key={item.name} header={item.name} name={item.name} extra={
            <>
              <Space size='large' style={{ justifyContent: 'flex-end' }}>
                <Button status="success"
                  long={true}
                  draggable={true}
                  onDragEnd={(e) => {
                    toNode(item);
                    handleCreateNode(item.name, e)
                  }}
                  onClick={() => {
                    toNode(item);
                    handleCreateNode(item.name, null)
                  }}>
                  节点
                </Button>
              </Space>
            </>
          }>

            <Space size='large' style={{ justifyContent: 'flex-end' }}>
              <Button
                onClick={() => {
                  Modal.confirm({
                    title: '更新数据',
                    footer: null,
                    icon: null,
                    maskClosable: false,
                    content: <ObjectForm
                      isCreate={true}
                      initialValues={item}
                      submitLabel="更新"
                      onSubmit={(values: ObjectItem) => {
                        updateObject(values.name, values.defaultValue);
                        toNode(values);
                        handleCreateNode(values.name, null, {}, true)
                        Modal.destroyAll();
                      }}
                    />,
                  })

                }}
              >
                更新数据
              </Button>
              <Popconfirm
                focusLock
                title='请核实画布中，是否已解除相关节点？'
                onOk={() => {
                  deleteObject(item.name)
                }}
              >
                <Button status="danger" >
                  删除
                </Button>
              </Popconfirm>
            </Space>
          </Collapse.Item>
        ))}
      </Collapse>
    </>
  );
});
ObjectJSON.displayName = 'ObjectJSON';

const Screen: React.FC<{ handleCreateNode: (nodeName: string, e: React.DragEvent<HTMLDivElement> | null, data?: Record<string, any>, remove?: boolean) => void }> = React.memo((props) => {
  const { codeckPersistMap, codeckMapID } = useFileStore();
  const codeckPersistMapList = keys(codeckPersistMap.map).filter(item => !item.includes('[Function]'));
  const { handleCreateNode } = props;
  return (
    <>
      <List
        size='small'
        dataSource={codeckPersistMapList}
        render={(item, index) =>
          <List.Item key={index}>
            <Space size='large' style={{ justifyContent: 'flex-end' }}>
              <p>{item}</p>
              <Button status="success"
                draggable={true}
                onDragEnd={(e) => {
                  if (item == codeckMapID) {
                    Notification.error({
                      style: { width: 500, marginTop: 45 },
                      title: '当前为' + item + '画布',
                      content: '为了程序的安全，无法自己引用自己',
                    })
                    return;
                  }
                  handleCreateNode('requireNodeALL', e, {
                    Path: item,
                    labelT: 'requireALL ' + item,
                    variable: 1,
                  })
                }}
                onClick={() => {
                  if (item == codeckMapID) {
                    Notification.error({
                      style: { width: 500, marginTop: 45 },
                      title: '当前为' + item + '画布',
                      content: '为了程序的安全，无法自己引用自己',
                    })
                    return;
                  }
                  handleCreateNode('requireNodeALL', null, {
                    Path: item,
                    labelT: 'requireALL ' + item,
                    variable: 1,
                  })
                }}>
                全部
              </Button>
              <Button status="warning"
                draggable={true}
                onDragEnd={(e) => {
                  if (item == codeckMapID) {
                    Notification.error({
                      style: { width: 500, marginTop: 45 },
                      title: '当前为' + item + '画布',
                      content: '为了程序的安全，无法自己引用自己',
                    })
                    return;
                  }
                  handleCreateNode('Modularization/require', e, {
                    Path: './' + item + '.js',
                    labelT: 'require ' + item,
                    variable: 1,
                  })
                }}
                onClick={() => {
                  if (item == codeckMapID) {
                    Notification.error({
                      style: { width: 500, marginTop: 45 },
                      title: '当前为' + item + '画布',
                      content: '为了程序的安全，无法自己引用自己',
                    })
                    return;
                  }
                  handleCreateNode('Modularization/require', null, {
                    Path: './' + item + '.js',
                    labelT: 'require ' + item,
                    variable: 1,
                  })
                }}>
                模块
              </Button>
            </Space>
          </List.Item>
        }
      />

    </>
  );
});
Screen.displayName = 'Screen';


const ObjectForm: React.FC<{
  isCreate: boolean;
  initialValues?: ObjectItem;
  submitLabel: string;
  onSubmit: (values: ObjectItem) => void;
}> = React.memo((props) => {
  const [form] = Form.useForm();
  return (
    <Form
      form={form}
      autoComplete="off"
      layout="vertical"
      initialValues={props.initialValues}
      onSubmit={props.onSubmit}
    >

      <FormItem
        disabled={props.isCreate} // 暂时不支持更新
        field="name"
        label="对象名"
        rules={[
          {
            required: true,
          },
        ]}
      >
        <Input placeholder="对象昵称" onKeyDown={(e) => e.stopPropagation()} />
      </FormItem>

      <FormItem field="defaultValue" label="键">
        <Input placeholder="点击设置" readOnly onKeyDown={(e) => e.stopPropagation()} onClick={() => {

          NodeInputTypeFcun(
            '_object',
            form.getFieldsValue(['defaultValue'])['defaultValue'] ?? '',
            (v) =>
              form.setFieldsValue({
                defaultValue: v,
              })
          )
        }} />
      </FormItem>

      <Space size='large' style={{ justifyContent: 'flex-end' }}>
        <Button type="primary" htmlType="submit" style={{ width: "100%" }} >
          {props.submitLabel}
        </Button>
        <Button type='secondary' onClick={() => Modal.destroyAll()}>取消</Button>
      </Space>

    </Form>
  );
});
ObjectForm.displayName = 'ObjectForm';

const FunctionForm: React.FC<{
  isCreate: boolean;
  initialValues?: FunctionItem;
  submitLabel: string;
  onSubmit: (values: FunctionItem) => void;
}> = React.memo((props) => {
  const Option = Select.Option;
  const groups = [
    [{
      label: '空',
      value: 'Function',
    }],
  ];

  const groupsName = [
    '常规',
  ];

  const [form] = Form.useForm();
  return (
    <Form
      form={form}
      autoComplete="off"
      layout="vertical"
      initialValues={props.initialValues}
      onSubmit={props.onSubmit}
    >

      <FormItem
        disabled={props.isCreate} // 暂时不支持更新
        field="name"
        label="函数名"
        rules={[
          {
            required: true,
            match: /^[a-zA-Z]/,
            message: '名称必须以字母开头',
          },
        ]}
      >
        <Input placeholder="名称必须以字母开头" onKeyDown={(e) => e.stopPropagation()} />
      </FormItem>
      <FormItem field="arg" label="参数">
        <Input placeholder="点击设置，可空，稍后可在函数里【对象】中修改" readOnly onKeyDown={(e) => e.stopPropagation()} onClick={() => {

          NodeInputTypeFcun(
            '_object',
            form.getFieldsValue(['arg'])['arg'] ?? '',
            (v) =>
              form.setFieldsValue({
                arg: v,
              })
          )
        }} />
      </FormItem>
      <FormItem
        label='函数预设'
        field='type'
      >
        <Select showSearch placeholder={'空'} onKeyDown={(e) => e.stopPropagation()}>
          {groups.map((options, index) => {
            return (
              <Select.OptGroup label={`${groupsName[index]}`} key={index} >
                {options.map((option, index) => (
                  <Option key={option.value} value={option.value} >
                    {option.label}
                  </Option>
                ))}
              </Select.OptGroup>
            );
          })}
        </Select>
      </FormItem>
      <Space size='large' style={{ justifyContent: 'flex-end' }}>
        <Button type="primary" htmlType="submit" style={{ width: "100%" }} >
          {props.submitLabel}
        </Button>
        <Button type='secondary' onClick={() => Modal.destroyAll()}>取消</Button>
      </Space>

    </Form>
  );
});
FunctionForm.displayName = 'FunctionForm';


const VariableForm: React.FC<{
  isCreate: boolean;
  initialValues?: VariableItem;
  submitLabel: string;
  onSubmit: (values: VariableItem) => void;
}> = React.memo((props) => {
  const [form] = Form.useForm();
  return (

    <Form
      form={form}
      autoComplete="off"
      layout="vertical"
      initialValues={props.initialValues}
      onSubmit={props.onSubmit}
    >
      <div style={{ display: 'flex' }}>
        <FormItem
          field="scope"
          label="*作用域"
          style={{ marginRight: 2.5 }}
        >
          <Select >
            {variableScopeTypes.map((v) => (
              <Select.Option key={v} value={v} >
                {v}
              </Select.Option>
            ))}
          </Select>
        </FormItem>

        <FormItem
          field="type"
          label="*类型"
          style={{ marginLeft: 2.5 }}
        >
          <Select showSearch onKeyDown={(e) => e.stopPropagation()}>
            {variableTypes.map((v) => (
              <Select.Option key={v} value={v}  >
                {v}
              </Select.Option>
            ))}
          </Select>
        </FormItem>
      </div>
      <FormItem
        disabled={props.isCreate} // 暂时不支持更新
        field="name"
        label="变量名"

        rules={[
          {
            required: true,
            match: /^[a-zA-Z_]/,
            message: '名称必须以_或字母开头',
          },
        ]}

      >
        <Input placeholder="名称必须以_或字母开头" onKeyDown={(e) => e.stopPropagation()} />
      </FormItem>

      <FormItem field="defaultValue" label="默认值">
        <Input placeholder="请输入..." onKeyDown={(e) => e.stopPropagation()} onClick={() => {

          NodeInputTypeFcun(
            form.getFieldsValue(['type'])['type'],
            form.getFieldsValue(['defaultValue'])['defaultValue'] ?? '',
            (v) =>
              form.setFieldsValue({
                defaultValue: v,
              })
          )
        }} />
      </FormItem>

      <Space size='large' style={{ justifyContent: 'flex-end' }}>
        <Button type="primary" htmlType="submit" style={{ width: "100%" }} >
          {props.submitLabel}
        </Button>
        <Button type='secondary' onClick={() => Modal.destroyAll()}>取消</Button>
      </Space>

    </Form>
  );
});
VariableForm.displayName = 'VariableForm';



const NodaForm: React.FC<{
  submitLabel: string;
  onSubmit: (values: { url: string }) => void;
}> = React.memo((props) => {
  const [form] = Form.useForm();
  return (

    <Form
      form={form}
      autoComplete="off"
      layout="vertical"
      onSubmit={props.onSubmit}
    >
      <FormItem field="url" label="">
        <Input placeholder="请输入控件链接..." onKeyDown={(e) => e.stopPropagation()} />
      </FormItem>

      <Space size='large' style={{ justifyContent: 'flex-end' }}>
        <Button type="primary" htmlType="submit" style={{ width: "100%" }} >
          {props.submitLabel}
        </Button>
        <Button type='secondary' onClick={() => Modal.destroyAll()}>取消</Button>
      </Space>
    </Form>
  );
});
NodaForm.displayName = 'NodaForm';



const CustomNodes: React.FC<{
  list: {
    key: any;
    value: any;
  }[]
}> = React.memo((props) => {


  return (
    <>
      <Transfer
        simple
        dataSource={props.list}
        showSearch
        defaultTargetKeys={['4', '6', '7']}
        searchPlaceholder='请输入...'
        titleTexts={['全部节点', '我的节点包']}

      />
    </>
  );
});
CustomNodes.displayName = 'CustomNodes';